<template>
	<view class="api-test-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<uni-icons type="left" size="20" @click="goBack"></uni-icons>
			</view>
			<view class="navbar-title">API联调测试</view>
			<view class="navbar-right">
				<uni-icons type="refresh" size="20" @click="refreshAll"></uni-icons>
			</view>
		</view>
		
		<!-- 测试结果展示 -->
		<view class="test-results">
			<view class="test-section">
				<view class="section-title">后端服务状态</view>
				<view class="status-item">
					<text class="status-label">服务地址：</text>
					<text class="status-value">{{ apiConfig.BASE_API }}</text>
				</view>
				<view class="status-item">
					<text class="status-label">健康检查：</text>
					<text class="status-value" :class="healthStatus.status">{{ healthStatus.message }}</text>
				</view>
			</view>
			
			<view class="test-section">
				<view class="section-title">API接口测试</view>
				
				<!-- 加油站API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">加油站列表</text>
						<view class="api-actions">
							<view class="test-btn" @click="testGasStations">测试</view>
							<view class="result-indicator" :class="gasStationsTest.status"></view>
						</view>
					</view>
					<view v-if="gasStationsTest.data" class="api-result">
						<text class="result-text">获取到 {{ gasStationsTest.data.length }} 个加油站</text>
					</view>
				</view>
				
				<!-- 消费记录API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">消费记录</text>
						<view class="api-actions">
							<view class="test-btn" @click="testConsumptionRecords">测试</view>
							<view class="result-indicator" :class="consumptionTest.status"></view>
						</view>
					</view>
					<view v-if="consumptionTest.data" class="api-result">
						<text class="result-text">获取到 {{ consumptionTest.data.length }} 条记录</text>
					</view>
				</view>
				
				<!-- 优惠券API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">优惠券列表</text>
						<view class="api-actions">
							<view class="test-btn" @click="testCoupons">测试</view>
							<view class="result-indicator" :class="couponsTest.status"></view>
						</view>
					</view>
					<view v-if="couponsTest.data" class="api-result">
						<text class="result-text">获取到 {{ couponsTest.data.length }} 张优惠券</text>
					</view>
				</view>
				
				<!-- 团购API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">团购活动</text>
						<view class="api-actions">
							<view class="test-btn" @click="testGroupBuy">测试</view>
							<view class="result-indicator" :class="groupBuyTest.status"></view>
						</view>
					</view>
					<view v-if="groupBuyTest.data" class="api-result">
						<text class="result-text">获取到 {{ groupBuyTest.data.length }} 个团购</text>
					</view>
				</view>
				
				<!-- 团购详情API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">团购详情</text>
						<view class="api-actions">
							<view class="test-btn" @click="testGroupBuyDetail">测试</view>
							<view class="result-indicator" :class="groupBuyDetailTest.status"></view>
						</view>
					</view>
					<view v-if="groupBuyDetailTest.data" class="api-result">
						<text class="result-text">团购ID: {{ groupBuyDetailTest.data.id }}, 标题: {{ groupBuyDetailTest.data.title }}</text>
					</view>
				</view>
				
				<!-- 团购详情API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">团购详情(修复后)</text>
						<view class="api-actions">
							<view class="test-btn" @click="testGroupBuyDetailFixed">测试修复</view>
							<view class="result-indicator" :class="groupBuyDetailFixedTest.status"></view>
						</view>
					</view>
					<view v-if="groupBuyDetailFixedTest.data" class="api-result">
						<text class="result-text">团购ID: {{ groupBuyDetailFixedTest.data.id }}, 标题: {{ groupBuyDetailFixedTest.data.title }}</text>
						<text class="result-text">发布者: {{ groupBuyDetailFixedTest.data.merchantName }}, 价格: ¥{{ groupBuyDetailFixedTest.data.groupPrice }}</text>
					</view>
				</view>
				
				<!-- 消息API测试 -->
				<view class="api-test-item">
					<view class="api-header">
						<text class="api-name">消息中心</text>
						<view class="api-actions">
							<view class="test-btn" @click="testMessages">测试</view>
							<view class="result-indicator" :class="messagesTest.status"></view>
						</view>
					</view>
					<view v-if="messagesTest.data" class="api-result">
						<text class="result-text">获取到 {{ messagesTest.data.length }} 条消息</text>
					</view>
				</view>
			</view>
			
			<!-- 测试总结 -->
			<view class="test-summary">
				<view class="summary-title">测试总结</view>
				<view class="summary-stats">
					<view class="stat-item">
						<text class="stat-label">成功：</text>
						<text class="stat-value success">{{ successCount }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">失败：</text>
						<text class="stat-value error">{{ errorCount }}</text>
					</view>
					<view class="stat-item">
						<text class="stat-label">总计：</text>
						<text class="stat-value">{{ totalCount }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '@dcloudio/uni-ui/lib/uni-ui/lib/uni-icons/uni-icons.vue';
	import { getGasStations } from '@/utils/gasStationApi.js';
	import { getConsumptionRecords } from '@/utils/consumptionApi.js';
	import { getUserCoupons } from '@/utils/couponApi.js';
	import { getActiveGroupPurchases, getGroupPurchaseDetail } from '@/utils/groupBuyApi.js';
	import { getUserMessages } from '@/utils/messageApi.js';
	import env from '@/config/env';
	
	export default {
		components: { 
			uniIcons
		},
		data() {
			return {
				apiConfig: env,
				healthStatus: { status: 'unknown', message: '未检测' },
				gasStationsTest: { status: 'unknown', data: null, message: '' },
				consumptionTest: { status: 'unknown', data: null, message: '' },
				couponsTest: { status: 'unknown', data: null, message: '' },
				groupBuyTest: { status: 'unknown', data: null, message: '' },
				groupBuyDetailTest: { status: 'unknown', data: null, message: '' },
				messagesTest: { status: 'unknown', data: null, message: '' },
				groupBuyDetailFixedTest: { status: 'unknown', data: null, message: '' }
			};
		},
		computed: {
			successCount() {
				return [this.gasStationsTest, this.couponsTest, this.groupBuyTest, this.groupBuyDetailTest, this.groupBuyDetailFixedTest, this.messagesTest]
					.filter(test => test.status === 'success').length;
			},
			errorCount() {
				return [this.gasStationsTest, this.couponsTest, this.groupBuyTest, this.groupBuyDetailTest, this.groupBuyDetailFixedTest, this.messagesTest]
					.filter(test => test.status === 'error').length;
			},
			totalCount() {
				return 7;
			}
		},
		onLoad() {
			this.checkHealth();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 刷新所有测试
			refreshAll() {
				this.testGasStations();
				this.testCoupons();
				this.testGroupBuy();
				this.testGroupBuyDetail();
				this.testGroupBuyDetailFixed();
				this.testMessages();
			},
			
			// 检查后端服务健康状态
			async checkHealth() {
				try {
					this.healthStatus = { status: 'testing', message: '检测中...' };
					
					// 尝试调用一个简单的API来检查服务状态
					const result = await getGasStations();
					
					if (result.success) {
						this.healthStatus = { status: 'success', message: '服务正常' };
					} else {
						this.healthStatus = { status: 'error', message: '服务异常' };
					}
				} catch (error) {
					console.error('健康检查失败:', error);
					this.healthStatus = { status: 'error', message: '连接失败' };
				}
			},
			
			// 测试加油站API
			async testGasStations() {
				try {
					this.gasStationsTest = { status: 'testing', data: null, message: '测试中...' };
					
					const result = await getGasStations();
					
					if (result.success) {
						this.gasStationsTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.gasStationsTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('加油站API测试失败:', error);
					this.gasStationsTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			},
			
			// 测试消费记录API
			async testConsumptionRecords() {
				try {
					this.consumptionTest = { status: 'testing', data: null, message: '测试中...' };
					
					const result = await getConsumptionRecords(1);
					
					if (result.success) {
						this.consumptionTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.consumptionTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('消费记录API测试失败:', error);
					this.consumptionTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			},
			
			// 测试优惠券API
			async testCoupons() {
				try {
					this.couponsTest = { status: 'testing', data: null, message: '测试中...' };
					
					const result = await getUserCoupons(1);
					
					if (result.success) {
						this.couponsTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.couponsTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('优惠券API测试失败:', error);
					this.couponsTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			},
			
			// 测试团购API
			async testGroupBuy() {
				try {
					this.groupBuyTest = { status: 'testing', data: null, message: '测试中...' };
					
					const result = await getActiveGroupPurchases();
					
					if (result.success) {
						this.groupBuyTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.groupBuyTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('团购API测试失败:', error);
					this.groupBuyTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			},
			
			// 测试团购详情API
			async testGroupBuyDetail() {
				try {
					this.groupBuyDetailTest = { status: 'testing', data: null, message: '测试中...' };
					
					// 使用第一个团购ID进行测试
					const groupBuyId = 1; 
					const result = await getGroupPurchaseDetail(groupBuyId);
					
					if (result.success) {
						this.groupBuyDetailTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.groupBuyDetailTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('团购详情API测试失败:', error);
					this.groupBuyDetailTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			},
			
			// 测试团购详情API (修复后)
			async testGroupBuyDetailFixed() {
				try {
					this.groupBuyDetailFixedTest = { status: 'testing', data: null, message: '测试中...' };
					
					// 使用第一个团购ID进行测试
					const groupBuyId = 1; 
					const result = await getGroupPurchaseDetail(groupBuyId);
					
					if (result.success) {
						this.groupBuyDetailFixedTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.groupBuyDetailFixedTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('团购详情API测试失败:', error);
					this.groupBuyDetailFixedTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			},
			
			// 测试消息API
			async testMessages() {
				try {
					this.messagesTest = { status: 'testing', data: null, message: '测试中...' };
					
					const result = await getUserMessages(1);
					
					if (result.success) {
						this.messagesTest = { 
							status: 'success', 
							data: result.data, 
							message: '测试成功' 
						};
					} else {
						this.messagesTest = { 
							status: 'error', 
							data: null, 
							message: result.message 
						};
					}
				} catch (error) {
					console.error('消息API测试失败:', error);
					this.messagesTest = { 
						status: 'error', 
						data: null, 
						message: '测试失败' 
					};
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.api-test-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		
		.custom-navbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 44px 16px 16px 16px;
			background-color: #ffffff;
			border-bottom: 1px solid #e5e5e5;
			
			.navbar-left, .navbar-right {
				width: 60px;
				display: flex;
				align-items: center;
			}
			
			.navbar-title {
				font-size: 18px;
				font-weight: bold;
				color: #333333;
			}
		}
		
		.test-results {
			padding: 16px;
			
			.test-section {
				background-color: #ffffff;
				border-radius: 8px;
				padding: 16px;
				margin-bottom: 16px;
				
				.section-title {
					font-size: 16px;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12px;
				}
				
				.status-item {
					display: flex;
					align-items: center;
					margin-bottom: 8px;
					
					.status-label {
						font-size: 14px;
						color: #666666;
						width: 80px;
					}
					
					.status-value {
						font-size: 14px;
						color: #333333;
						
						&.success {
							color: #52c41a;
						}
						
						&.error {
							color: #ff4d4f;
						}
						
						&.testing {
							color: #1890ff;
						}
						
						&.pending {
							color: #999999;
						}
					}
				}
				
				.api-test-item {
					border: 1px solid #e5e5e5;
					border-radius: 6px;
					padding: 12px;
					margin-bottom: 12px;
					
					.api-header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 8px;
						
						.api-name {
							font-size: 14px;
							font-weight: bold;
							color: #333333;
						}
						
						.api-actions {
							display: flex;
							align-items: center;
							
							.test-btn {
								padding: 4px 12px;
								background-color: #1890ff;
								color: #ffffff;
								border-radius: 4px;
								font-size: 12px;
								margin-right: 8px;
							}
							
							.result-indicator {
								width: 12px;
								height: 12px;
								border-radius: 50%;
								
								&.success {
									background-color: #52c41a;
								}
								
								&.error {
									background-color: #ff4d4f;
								}
								
								&.testing {
									background-color: #1890ff;
								}
								
								&.pending {
									background-color: #d9d9d9;
								}
							}
						}
					}
					
					.api-result {
						.result-text {
							font-size: 12px;
							color: #666666;
						}
					}
				}
			}
			
			.test-summary {
				background-color: #ffffff;
				border-radius: 8px;
				padding: 16px;
				
				.summary-title {
					font-size: 16px;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12px;
				}
				
				.summary-stats {
					display: flex;
					justify-content: space-around;
					
					.stat-item {
						text-align: center;
						
						.stat-label {
							font-size: 12px;
							color: #666666;
							display: block;
							margin-bottom: 4px;
						}
						
						.stat-value {
							font-size: 18px;
							font-weight: bold;
							
							&.success {
								color: #52c41a;
							}
							
							&.error {
								color: #ff4d4f;
							}
						}
					}
				}
			}
		}
	}
</style>
